<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <h3>添加商品</h3>
      </div>
      <el-form :model="form" label-width="120px" >
        <el-form-item label="商品名称" >
          <el-col :span="14">
            <el-input v-model="shop" />
          </el-col>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="categoryname" placeholder="选择类型">
            <el-option label="标间" value="标间" />
            <el-option label="双人间" value="双人间" />
            <el-option label="大床房" value="大床房" />
            <el-option label="会议室" value="会议室" />
            <el-option label="高级别墅" value="高级别墅" />
            <el-option label="总统套房" value="总统套房" />
          </el-select>
        </el-form-item>
        <el-form-item label="房号">
          <el-col :span="14">
            <el-input v-model="roomnum" id="timi"></el-input>
          </el-col>
        </el-form-item>
       
        <el-form-item label="商品图片">
          <input type="file" name="productImg">
        </el-form-item>
        <el-form-item label="是否上架">
          <el-radio-group v-model="issell">
            <el-radio label="1" size="large">上架</el-radio>
            <el-radio label="0" size="large">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-col :span="14">
            <el-input v-model="price" />
          </el-col>
        </el-form-item>
        <el-form-item label="商品原价">
          <el-col :span="14">
            <el-input v-model="oldprice" />
          </el-col>
        </el-form-item>
        <el-form-item label="商品详情">
          <el-col :span="14">
            <el-input v-model="detail" type="textarea" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onGoodsAdd()">添加</el-button>
        </el-form-item>
      </el-form>
    </template>
  </el-card>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { GoodsAdd } from '@/api/goods.js'
// import router from '../router'
import { Plus } from '@element-plus/icons-vue'
import { looseIndexOf } from '@vue/shared';
// const form = reactive({
//   // productImg:'',
//   id: '',
//   shop: '',
//   price: '',
//   oldprice: '',
//   detail: '',
//   categoryname: '',
//   issell: '', //上架
//   nowtime: '',
//   imageUrl: ''
// })
const id = ref('')
const shop = ref('')
const price = ref('')
const oldprice = ref('')
const detail = ref('')
const categoryname = ref('')
const issell = ref()
const roomnum=ref('')
//点击提交
// const onSubmit = () => {
//   console.log('submit!')
//   onGoodsAdd()
// }
//生成时间戳
const onTime = () => {
  let time = parseInt(new Date().getTime() / 1000) + ''
  id.value = time
}
//调用接口
const onGoodsAdd = async () => {
  const imgg = document.querySelector("input[name='productImg']")
  onTime()
  let imggg = imgg.files[0]
  let formDate = new FormData()
  formDate.append('id', id.value)
  formDate.append('shop', shop.value)
  formDate.append('price', price.value)
  formDate.append('oldprice', oldprice.value)
  formDate.append('detail', detail.value)
  formDate.append('categoryname', categoryname.value)
  formDate.append('issell', issell.value)
  formDate.append('roomnum', roomnum.value)
  formDate.append('productImg', imggg)
  let data = await GoodsAdd(formDate
  )
  let { resultCode, resultInfo } = data
  if (resultCode == 1) {
    alert(resultInfo)
  }
}
</script>

<style scoped lang="scss">
.box-card {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .text {
    font-size: 14px;
  }

  width: 100%;
  border-left: 0;
}
</style>
